<template>
  <div class="detail">
    <div class="header">
      <span @click="bock">＜</span>
      <h4>团购详情</h4>
      <span></span>
    </div>
    <div class="main">
      <p>
        <img :src="getDetail.img" alt />
      </p>
      <p>{{getDetail.name}}</p>
      <p>{{getDetail.dizhi}}</p>
      <p>
        活动时间：{{getDetail.time}}
        <span>已报名：{{getDetail.renshu}}人</span>
      </p>
      <h3>团购介绍</h3>
      <p class="p1">{{getDetail.jieshao}}</p>
      <van-swipe-cell v-for="(item,index) in getDetails" :key="index">
        <van-cell :border="false" value="内容">
          <div class="f">
            <img :src="item.img" alt class="img1" />
            <div class="item-info">
              <p>{{item.name}}</p>
              <p>{{item.haoma}}</p>
            </div>
          </div>
        </van-cell>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click="Del(item.id)" />
        </template>
      </van-swipe-cell>
    </div>
  </div>
</template>
<script>
import axios from "../../src/axios/index";
import api from "../api/index";
export default {
  name: "Detail",
  data() {
    return {
      getDetail: [],
      id: ""
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.det();
  },
  methods: {
    det(id) {
      axios.get("/xiangqing", { params: { id: this.id } }).then(res => {
        this.getDetail = res.data;
        this.getDetails = res.haoma;
      });
    },
    Del(id) {
      axios.delete(`/haomadel/${id}`).then(res => {
        console.log(res);
      });
    },
    bock() {
      this.$router.go(-1);
    }
  }
};
</script>
<style scoped>
.detail {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.f {
  width: 100%;
  display: flex;
}
.header {
  width: 100%;
  height: 50px;
  background: #2e9bfc;
  display: flex;
  justify-content: space-around;
  color: #fff;
  line-height: 50px;
}
.header img {
  width: 90px;
  height: 30px;
  padding: 10px 5px;
}
.main {
  width: 100%;
  height: auto;
  flex: 1;
  overflow-y: scroll;
}
img {
  width: 100%;
  height: 238px;
}
p {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
h3 {
  margin-top: 10px;
}
.p1 {
  color: #a7a7a7;
}
.img1 {
  width: 70px;
  height: 70px;
}
.delete-button {
  height: 100%;
}
</style>